<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- bootstrap 依赖  -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>


<div class="container-fluid p-5 bg-primary text-white text-center">
    <h1>向历史发问，向古人发问</h1>
    <p></p>
</div>

<div class="container mt-5">
    <div class="row">
        <div class="col-sm-3">
            <h3>first row</h3>
            <p>tech</p>
            <p>tech is good</p>
        </div>
        <div class="col-sm-3">
            <h3>second row</h3>
            <p>music</p>
            <p>music is good</p>
        </div>
        <div class="col-sm-3">
            <h3>third row</h3>
            <p>film</p>
            <p>film is good</p>
        </div>
        <div class="col-sm-3">
            <h3>fourth row</h3>
            <p>book</p>
            <p>book is good</p>
        </div>
    </div>

<!--网格系统，加起来=12列-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-1 text-center">1</div>
            <div class="col-8 text-center">2</div>
            <div class="col-1 text-center">3</div>
            <div class="col-2 text-center">4</div>
        </div>
    </div>
</div>


<div id="footer">
    bootstrap5是一个响应式前端组件<br>
    <a href="https://www.runoob.com/bootstrap5/bootstrap5-tutorial.html">https://www.runoob.com/bootstrap5/bootstrap5-tutorial.html</a>
</div>


</body>
</html>